/**
 * 柱子
 */
import { getRandom, width, getTimer, birdAreaHeight } from "./utils.js";
import game from "./game.js"

function Pipe() {
  this.width = 52; // 柱子的宽
  // 创建一个文档碎片
  var fragment = document.createDocumentFragment();
  var minHeight = 60, // 柱子的最小高度
    gap = 150, // 柱子中间的缝隙
    maxHeight = birdAreaHeight - gap - minHeight; // 柱子的最高高度
  // 接下来来确定一组柱子的高度
  const h1 = getRandom(minHeight, maxHeight);
  const h2 = birdAreaHeight - h1 - gap;
  // 创建上方的柱子
  const div1 = document.createElement("div");
  div1.className = "pipeup";
  div1.style.height = h1 + "px";
  div1.style.left = width + "px";

  // 将上方柱子添加到文档碎片
  fragment.appendChild(div1);

  // 还需要将这个柱子添加数组里面，方便后面判断操作
  Pipe.all.push({
    dom: div1, // dom 属性指向当前的 div
    height: h1,
    width: this.width,
    top: 0,
    left: width,
  });

  // 创建下方的柱子
  const div2 = document.createElement("div");
  div2.className = "pipedown";
  div2.style.height = h2 + "px";
  div2.style.left = width + "px";

  // 将下方柱子添加到文档碎片
  fragment.appendChild(div2);

  // 还需要将这个柱子添加数组里面，方便后面判断操作
  Pipe.all.push({
    dom: div2, // dom 属性指向当前的 div
    height: h2,
    width: this.width,
    top: h1 + gap, // 下方柱子的 top 值 = 上面柱子的高度 + 空隙
    left: width,
  });

  // 添加到页面中
  document.getElementById("game").appendChild(fragment);
}
Pipe.all = []; // 这是一个静态属性，用于保存所有的柱子

// 这是一个静态方法，用于移动 all 数组里面的所有柱子
Pipe.timer = getTimer(30, Pipe, function () {
  for (let i = 0; i < Pipe.all.length; i++) {
    const p = Pipe.all[i]; // 得到当前的柱子
    p.left -= 2; // 通过修改 left 的值来让柱子进行移动
    if (p.left < -p.width) {
      // 如果进入到此 if，说明柱子已经移动到了舞台之外
      p.dom.remove(); // 从屏幕上面移除
      Pipe.all.splice(i, 1); // 从数组中删除该柱子
      i--;
    } else {
      // 如果进入 else，说明柱子没有抛出舞台
      // p.dom.style.left = p.left + 'px';
      p.dom.style.transform = `translateX(${p.left - width}px)`;
    }
  }
  // 每次柱子移动一次，就需要判断一下玩家是否得分
  game.getScore();
  // 每次柱子移动一次，也同样需要判断一下游戏是否结束
  game.isCrash();
});

export default Pipe;
